{extend name="cms/public/base" /}
{block name="content"}
{php}
if (!function_exists('ShopOrderShow')) {
    function ShopOrderShow($item, $action)
    {
        switch ($action) {
            case 'pay':
                if ($item->status != 0) return false;
                if ($item->is_pay_deposit && !$item->choose_stock) return false;
                if ($item->is_pay_deposit && $item->transferred) return false;
                return true;
        }
    }

}

{/php}
<main id="mainbody">
    <div class="container">
        <div class="row">
            <div class="col-md-3 user-menu">
                {include file="cms/user/menu" /}
            </div>
            <div class="col-md-9 user-content">
                <h3>我的订单</h3>
                <hr>
                <div>
                    {foreach $order_list as $order} 
                    <div class="order-item">
                        <div class="order-header">
                            <div class="order-time"> {:date('Y-m-d H:i', $order->created_at->timestamp)} </div>
                            <div class="order-tips"> <span class="yi-tag">{$order->state_tip}</span> 
                                {if $order->after_sale_status_tip} <span class="yi-tag sale-after-tips" data-toggle="tooltip" title="{$order->after_sale_status_tip['tip']}" data-placement="top"> <i class="far fa-question-circle"></i> {$order->after_sale_status_tip['text']}</span> {/if}
                            </div>
                        </div>
                        <div class="order-content">
                            
                            {foreach $order->products as $product} 
                            <div class="order-content-0">
                                <div class="order-product-img">
                                    <img src="{$product->images[0]}" alt="">
                                </div>
                                <div class="order-product-content">
                                    <div class="order-product-title"><a href="/shop/index/product/info.html?id={$product->product_id}">{$product->title}</a></div>
                                    <div class="order-product-attr text-muted text-sm">{$product->attributes}</div>
                                    <div class="order-product-price text-sm">￥{$product->price} x {$product->quantity} {$product->unit}</div>
                                    {if ($order->status == 3 && $product->buyer_comment == 0)}
                                    <a class="text-sm comment-btn" style="cursor: pointer;" href="/shop/index/order/comment?id={$product->id}">写评价</a>
                                    {/if}
                                </div>
                            </div>
                            {/foreach}
                            <div class="text-right text-muted text-sm">
                                订单号：{$order->order_sn}， 共 {:count($order->products)} 件商品 金额 ￥{$order->order_price}
                            </div>
                        </div>
                        <div class="order-operate" data-order_sn="{$order->order_sn}">
                            {if in_array($order->status, [1,2,5]) && $order->after_sale_status != 1}
                            <button class="action-btn btn-sale-after">申请售后</button>
                            {/if}
                            {if $order->after_sale_status==1}
							<button class="action-btn btn-cancel-after-sale">取消售后</button>
                            {/if}
                            {if $order->status == 0}
							<button class="action-btn btn-cancel">取消订单</button>
                            {/if}
                            {if ShopOrderShow($order, 'pay')}
                            <a href="/shop/index/order/submit.html?order_sn={$order->order_sn}" class="action-btn">立即支付</a>
                            {/if}
                            {if $order->is_delivery == 1 && $order->status > 1 && $order.is_received == 0 && get_module_group_config('shop', 'express', 'express_open')} 
							<button class="action-btn btn-show-express-trace">查询物流</button>
                            {/if}
                            {if ($order->status == 2 && $order->is_received == 0)}
							<button class="action-btn recom btn-receive">确认收货</button>
                            {/if}
                            <!-- {if ($order->status == 3 && $order->buyer_comment == 0)}
                            <button class="action-btn recom">去评价</button>
                            {/if} -->
                            {if in_array($order->status, [-1, 3, 6])}
							<button class="action-btn btn-delete">删除订单</button>
                            {/if}
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div style="display: flex;justify-content: center;" class="mt-3"><div>
                    {$paginator|raw}
                </div></div>
                
            </div>
        </div>
    </div>

    
    <div class="y-modal modal fade" id="modal-after-sale" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-title text-center">申请售后</div>
                <div class="modal-body">
                    <div class="form form-horizontal">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">类型：</label>
                            <div class="col-md-8">
                                <select id="s-type" class="form-control">
                                    <option value="3">换货</option>
                                    <option value="2">退款退货</option>
                                    <option value="1">仅退款</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">快递单号：</label>
                            <div class="col-md-8">
                                <input id="s-no" type="text" class="form-control" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">备注：</label>
                            <div class="col-md-8">
                                <textarea id="s-remark" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-danger btn-sale-after-submit">提交</button>
                            <button class="btn" onclick="modalAfterSale('hide')">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="y-modal modal fade" id="modal-express-trace" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-title text-center">查看物流轨迹</div>
                <div class="modal-body">
                    <div id="express-trace-box">
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>
{/block}

{block name="styles"}
<link rel="stylesheet" href="__CMS_THEME__css/user.css">
<link rel="stylesheet" href="/modules/shop/css/common.css">
<style>
    .order-item {
        margin: 5px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .order-header {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #999;
    }
    .order-content {
        padding: 10px 0;
    }
    .order-content-0 {
        display: flex;
    }
    .order-product-content {
        flex: 1;
    }
    .order-content-1 {
        display: flex;
    }
    .order-product-img {
        width: 100px;
        padding: 5px;
    }
    .order-product-img img {
        width: 100%;
        border-radius: 5px;
    }
    .order-operate {
        display: flex;
        justify-content: end;
    }
    .action-btn {
        width: 83px;
        height: 31px;
        margin: 0;
        margin-left: 12px;
        padding: 0;
        text-align: center;
        line-height: 31px;
        font-size: 13px;
        color: #303133;
        background: #fff;
        border-radius: 100px;
        border: 1px solid #ddd;
    }
    .express-trace-list li{
        font-size: 13px;
        margin: 5px 0;
    }

    .comment-btn {
        background: #fff9f9;
        color: #fa436a;
        padding: 3px 15px;
        border: 1px solid #ffd1d1;
        border-radius: 100px;
        font-size: 12px;
    }
</style>
{/block}

{block name="scripts"}
<script>
    function modalAfterSale(action) {
        $('#modal-after-sale').modal(action)
    }
    function modalExpressTrace(action) {
        $('#modal-express-trace').modal(action)
    }
    Yi.ready(function() {
        var sn;
        $('.btn-delete').click(function() {
            var order_sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            $.confirm('确定删除订单吗？', function() {
                Yi.ajax({
                    url: '/shop/api/order/del',
                    data: {
                        order_sn: order_sn
                    }
                }, function() {
                    location.reload();
                });
            });
        });

        $('.btn-cancel').click(function() {
            var order_sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            $.confirm('确定删除订单吗？', function() {
                Yi.ajax({
                    url: '/shop/api/order/cancel',
                    data: {
                        order_sn: order_sn
                    }
                }, function() {
                    location.reload();
                });
            });
        })
        
        $('.btn-sale-after').click(function() {
            sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            modalAfterSale('show')
        });
        $('.btn-sale-after-submit').click(function() {
            var form = {
                order_sn: sn, type: $('#s-type').val(), no: $("#s-no").val(), remark: $('#s-remark').val()
            }
            Yi.ajax({
                url: '/shop/api/order/applyRefund',
                data: form,
            }, function() {
                modalAfterSale('hide')
                setTimeout(function() {
                    location.reload()
                }, 1000)
            });
        });

        $('.btn-cancel-after-sale').click(function() {
            sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            $.confirm('确定取消吗？', function() {
                Yi.ajax({
                    url: '/shop/api/order/cancelPostSale',
                    data: {order_sn: sn}
                }, function() {
                    setTimeout(function() {
                        location.reload()
                    }, 1000)
                })
            })
        });

        $('.btn-show-express-trace').click(function() {
            $('#express-trace-box').html('');
            sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            Yi.ajax({
                url: '/shop/api/order/getExpressInfo',
                data: {order_sn: sn}
            }, function(data) {
                modalExpressTrace('show');
                var html = '<ul class="express-trace-list">';
                for (var i = 0; i < data.length; i ++) {
                    var item = data[i];
                    html += '<li style="margin: 10px 0;">' + item.time + ' ' + item.content + '</li>';
                }
                html += '</ul>';
                $('#express-trace-box').html(html);
            })
        });
        
        $('.btn-receive').click(function() {
            sn = $($(this).parents('.order-operate')[0]).data('order_sn');
            $.confirm('确定收货吗？', function() {
                Yi.ajax({
                    url: '/shop/api/order/receive', data: {order_sn: sn}
                }, function() {
                    setTimeout(function() {
                        location.reload()
                    }, 1000)                    
                })
            })
        })
        $('.sale-after-tips').click(function() {
            var tips = $(this).attr('title')
            if (tips) Toastr.info(tips)
        })
    });
</script>
{/block}